 <template>
	<view class="content">
		<view class="status_bar"></view>
		<!-- 头部 -->
		<view class="header">
			<view class="header-left" @tap="returns">
				<u-icon name="arrow-leftward" color="white" size="45"></u-icon>
				<text>歌单</text>
			</view>
			<view class="header-right">
				<u-icon name="search" size="45" color="white"></u-icon>
				<image src="@/static/icon/searchdiandian1.png" mode=""> </image>
			</view>
		</view>
		<!-- 头像 歌单名 -->
		<view class="user">
			<view class="user-left">
				<image :src="playlist.coverImgUrl" @click="listMessage" mode=""></image>
			</view>
			<view class="user-right">
				<text>{{playlist.name}}</text>
				<view class="user-head">
					<image :src="creator.avatarUrl" mode=""></image>
					<text>{{creator.nickname}}</text>
					<view class="user-icon" v-if="playlist!== ''">
						<u-icon name="plus" color="white" size="10"></u-icon>
						<!-- <uni-icons color="white" type="plusempty"></uni-icons> -->
					</view>
				</view>
				<view class="user-text">
					<view>
						{{playlist.description}}
					</view>
					<u-icon name="arrow-right" size="35" @click="listMessage"
						style="width: 60rpx; padding-left: 13rpx;"></u-icon>
					<!-- <uni-icons @click="listMessage" color="white" type="arrowright"></uni-icons> -->
				</view>

			</view>
		</view>
		<!-- 背景图 -->
		<view class="bg" :style='{"background-image":"url("+playlist.coverImgUrl+")"}'></view>
		<!-- 歌单详情 -->
		<view class="list-message">
			<view class="message-box">
				<view>
					<u-icon name="plus-circle" color="black" size="40"></u-icon>
					<text>{{playlist.subscribedCount}}</text>
					<text style="padding-left: 8px;color: #e5e5e5;">|</text>
				</view>
				<!-- 评论 -->
				<view @tap="commenton">
					<image lazy-load src="@/static/comment.png" mode=""></image>
					<text>{{playlist.commentCount}}</text>
					<text style="padding-left: 8px;color: #e5e5e5;">|</text>
				</view>
				<view>
					<image lazy-load src="@/static/share.png" mode=""></image>
					<text>{{playlist.shareCount}}</text>
				</view>
			</view>
		</view>
		<!-- 播放歌曲列表 -->
		<view class="play-list">
			<view>
				<view class="list-title">
					<image lazy-load src="@/static/icons/bofang_icon.png" mode=""></image>
					<text>播放全部</text>
					<text>({{trackIds.length}})</text>
				</view>
				<scroll-view scroll-y="true" style="height: 860rpx">
					<view class="list-song" @click="gotoPlay" v-for="(item,index) in trackIds" :key="item.id">
						<view class="song-left" @tap="playsong(item.id,item,index)">
							<text style="padding: 0 30rpx;color: #909090;font-size: 35rpx;">{{index + 1}}</text>
							<view class="song-name">
								<text>{{item.name}}</text>
								<view class="song-text">
									<text style="font-size: 20rpx;color: #909090;">
										{{item.ar[0].name }}-{{item.al.name}}
									</text>
								</view>
							</view>
						</view>
						<view class="mv">
							<image src="@/static/mvs.png" mode="" style="width: 60rpx;"></image>
						</view>
						<view class="gengduo">
							<image src="@/static/icon/searchdiandian1.png" mode=""></image>
						</view>
					</view>
				</scroll-view>
			</view>
		</view>
		<!-- 播放组件 -->
		<view class="footer">
			<play></play>
		</view>
		<!-- 弹出歌单详情 -->
		<u-popup class="bgc" v-model="show" mode="bottom" height="100%" close-icon-pos="top-right">
			<!-- 关闭按钮 -->
			<view class="prop-close">
				<u-icon size="30" @click="close" color="white" name="close"></u-icon>
			</view>
			<!-- 背景层 -->
			<view class="bgc" :style='{"background-image":"url("+playlist.coverImgUrl+")"}'></view>
			<!-- 图片 -->
			<view class="img" @tap="mesages(playlist.coverImgUrl)">
				<image :src="playlist.coverImgUrl" mode=""></image>
			</view>
			<!-- 标题 -->
			<view class="prop-list">
				<text>{{playlist.name}}</text>
			</view>
			<!-- tip -->
			<view class="tip">
				<text style="margin-right: 10rpx;">标签:</text>
				<view class="tip-item" v-for="(item,index) in playlist.tags" :key="index">
					<text>{{item,index}}</text>
				</view>
			</view>

			<!-- 歌单介绍 -->
			<view class="introduction">
				<scroll-view scroll-y="true" style="height: 500px;">
					<view>
						<text>
							{{playlist.description}}
						</text>
					</view>
				</scroll-view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import {
		getlistDetails,
		playGdMusic,
		getSongList
	} from '@/network/recommen.js'
	import play from '@/components/play.vue'
	export default {
		data() {
			return {
				mv: '',
				listid: '',
				playlist: [], //所有数据
				creator: [], // 作者信息
				trackIds: [], //歌曲信息  //总的数据 暂时未获取
				playUrl:[], //把每次获取的url地址保存起来
				tracks: [],
				id: '',
				phoneheight: "", //手机高度
				show: false,
				user: ''
			}
		},
		components: {
			play
			// 'v-ad': Audio, //播放器
		},
		updated() {
			// this.getlistDetails()
		},
		methods: {
			//获取歌单所有的歌曲
			async getlistDetails() {
				const {
					playlist
				} = await getlistDetails(this.listid)
				this.playlist = playlist
				this.creator = playlist.creator
				// 此时的trackIds拿到的歌曲数据是不完整的，但是id是完整的
				const idList = [];
				playlist.trackIds.map((item) => idList.push(item.id))
				// 通过id再次进行请求，得到完整的数据

				const {
					songs
				} = await getSongList(idList);
				console.log(songs);
				this.trackIds = songs
				this.mv = songs.mv
				// 把获取到的数据传到vuex
				console.log(playlist);
				this.$store.commit('getcommentlist', songs)
			},
			// 播放音乐
			playsong(id, list,index) {
				playGdMusic(id, list).then(res => {
					if (res.data[0].url == null) {
						uni.showModal({
							title: '提示',
							content: '因合作方要求，该资源暂时无法收听，我们正在努力争取歌曲回归',
							showCancel: false,
							success: function(res) {
								console.log('用户点击确定');
							}
						})
					} else {
						this.$store.commit('getmusicurl', res.data[0]);
						const musicData = {
							name: list.al.name, //获取歌单名字
							authorId: list.ar[0].id, //获取id
							author: list.ar[0].name, //获取歌手名字
							pic: list.al.picUrl,
							mvid: list.mv ,//获取mv地址
							musicurl: res.data[0].url,
							playindex: index
						}

						this.$store.commit('getmusicAll',musicData)
						// this.$store.commit('getfalg', true) //打开播放
						//  this.$store.commit('getsongId', id)

					}
					console.log(id.$index);
					
				})
			},
			gotoPlay(){
				uni.navigateTo({
					url: '/subpag/song/song?id=' + this.listid 
				})
			},
			
			commenton() {
				uni.navigateTo({
					url: '/subpag/listcomments/listcomments?id=' + this.listid
				})
			}, //进入有故事的评论区
			listMessage() {
				this.show = true
				console.log('------')
			}, //进入歌单详情信息
			onLoad(o) {
				this.listid = o.id
				this.getlistDetails();
				// this._getSongList();
				// this.playsong();
			}, //获取传过来的 id 
			close() {
				this.show = false
			}, //关闭歌单详情
			returns() {
				uni.navigateBack({
					data: 1
				})
			},

		},

	}
</script>
<style scoped lang="scss">
	.content {
		position: relative;
		font-family: STXihei
	}

	.header {
		height: 100rpx;
		padding: 0 30rpx;
		display: flex;
		align-items: center;
		color: white;
		justify-content: space-between;

		.header-left {
			display: flex;
			align-items: center;

			text {
				margin-left: 5px;
				font-size: 35rpx;
			}
		}

		.header-right {
			display: flex;
			align-items: center;

			image {
				width: 20px;
				height: 20px;
				margin-left: 20px;
			}
		}
	}

	//用户信息 歌单图片
	.user {
		margin-top: 20px;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0 30rpx;
		color: white;
		height: 262rpx;

		.user-left {
			image {
				width: 250rpx;
				height: 250rpx;
				border-radius: 10px;
			}
		}

		.user-right {
			padding: 10rpx 30rpx;
			overflow: hidden;
			height: 100%;
			justify-content: space-between;
			display: flex;
			flex-direction: column;

			image {
				width: 60rpx;
				height: 60rpx;
				border-radius: 50%;
			}

			.user-head {
				display: flex;
				align-items: center;

				// justify-content: space-between;
				text {
					font-size: 18rpx !important;
					white-space: nowrap;
					margin-left: 3px;
					margin-right: 3px;
					opacity: .5;
					color: white;
				}

				.user-icon {
					background-color: #8f7f89;
					padding: 0 20rpx;
					border-radius: 20px;
				}
			}
		}
	}

	.user-text {
		display: flex;
		align-items: center;
		justify-content: space-between;

		view {
			list-style: none;
			width: 280px;
			color: white;
			display: block;
			white-space: nowrap;
			overflow: hidden;
			text-overflow: ellipsis;
			opacity: .8;
			font-size: 20rpx;

		}
	}

	// 背景
	.bg {
		z-index: -1;
		width: 100%;
		height: 500rpx;
		position: absolute;
		top: 0;
		background-size: 100000px;
		// filter:blur(5px);
	}

	// 歌单评论点赞等
	.list-message {
		width: 100%;

		.message-box {
			display: flex;
			align-items: center;
			justify-content: space-evenly;
			background-color: #fff;
			width: 80%;
			margin: 44rpx auto;
			height: 100rpx;
			border-radius: 50px;
			padding: 30rpx;
			box-shadow: 0px 11px 7px -12px;

			view {
				display: flex;
				align-items: center;
			}

			image {
				width: 45rpx;
				height: 45rpx;
				padding: 0 10px;
				vertical-align: middle;
			}
		}
	}

	//播放全部区域
	.play-list {
		width: 100%;
		padding: 0 30rpx;
		-webkit-box-sizing: border-box;
		-moz-box-sizing: border-box;
		box-sizing: border-box;

		image {
			width: 20px;
			height: 20px;
		}

		.list-title {
			display: flex;
			align-items: center;

			text {
				margin: 0 10rpx;
			}
		}
	}

	.list-song {
		height: 100rpx;

		.song-left {
			display: flex;
			align-items: center;
		}

		margin: 20rpx 0;
		display: flex;
		align-items: center;
		width: 100%;
		justify-content: space-between;

		.song-name {
			display: flex;
			flex-direction: column;

			text {
				display: block;
				white-space: nowrap;
				overflow: hidden;
				text-overflow: ellipsis;
			}
		}

		.song-name text:nth-child(2),
			{
			font-size: 20rpx;
			color: #909090;
			width: 200rpx;
		}

		.mv {
			position: relative;
			right: 0;

			image {
				width: 50rpx;
				height: 50rpx;
			}
		}

		.gengduo {}
	}

	.song-name>text {
		width: 400rpx;
	}

	.song-text {
		text {
			width: 180px;
			overflow: hidden;
			white-space: nowrap;
			text-overflow: ellipsis;
		}
	}

	//底部播放器
	.footer {
		width: 100%;
		position: fixed;
		bottom: 0;
	}

	.bgc {
		background-size: 100000px;
		position: absolute;
		top: 0;
		z-index: -1;
		height: 112%;
		width: 100%;

		.btnintro {
			border: 1px solid red;
			position: absolute;
			bottom: 0;
		}
	}

	//弹出层
	.img {
		width: 500rpx;
		height: 500rpx;
		margin: 0 auto;
		margin-top: 200rpx;

		image {
			width: 100%;
			border-radius: 20px;
			height: 100%;
		}
	}

	.prop-list {
		display: flex;
		justify-content: center;
		color: white;
		padding: 30rpx 0;
	}

	// tip
	.tip {
		color: white;
		display: flex;
		align-items: center;
		padding: 0 50rpx;
		-webkit-box-sizing: border-box;
		-moz-box-sizing: border-box;
		box-sizing: border-box;
		width: 100%;
		overflow: hidden;

		.tip-item {
			padding: 10rpx 30rpx;
			margin: 0 5rpx;
			overflow: hidden;
			border-radius: 15px;
			box-sizing: border-box;
			font-size: 20rpx;
			background: rgba(0, 0, 0, .2)
		}
	}

	//歌单介绍
	.introduction {
		width: 100%;
		padding: 20rpx 50rpx;
		color: white;
		font-size: 20rpx;
	}

	// 关闭按钮
	.prop-close {
		display: flex;
		justify-content: flex-end;
		position: absolute;
		right: 50rpx;
		top: 100rpx;
	}

	page {
		height: 100vh;
	}

	.status_bar {
		height: var(--status-bar-height);
		width: 100%;
	}
</style>
